<template>
  <div class="box">
    <el-row style="width: 100%">
      <el-col :span="4" class="left">
        <tree></tree>
      </el-col>
      <el-col :span="20" class="box1">
        <role-list></role-list>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import tree from './components/tree.vue'
import roleList from './components/user-list.vue'
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .left {
    width: 100%;
    height: 100%;
  }

  .box1 {
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
  }
}
</style>
